---
title: 1-day vertical resource view
layout: demo-v4
plugins: [ daygrid, timegrid, resource-common, resource-daygrid, resource-timegrid ]
---
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'resourceTimeGrid' ],
      timeZone: 'UTC',
      defaultView: 'resourceTimeGridDay',
      resources: [
        { id: 'a', title: 'Room A' },
        { id: 'b', title: 'Room B'},
        { id: 'c', title: 'Room C' },
        { id: 'd', title: 'Room D' }
      ],
      events: '{{ site.data.demo_feed_baseurl }}/demo-events.json?with-resources=4&single-day'
    });

    calendar.render();
  });

</script>
<style>

  .fc-today {
    background: transparent !important; /* hack. because demo will always start out on current day */
  }

</style>
